import BackHead from '@/layouts/BackHead';
import BackSider from '@/layouts/BackSider';
import { useState } from 'react';
import type { IRoute } from 'umi';
import styles from './index.less';
interface Props {
  children: React.ReactNode;
  thisRoute: string;
  lastRoute: string;
}

const backRoute: IRoute[] = [
  // 后台管理（商家）
  {
    path: '/back', // 数据浏览
    role: '2',
    component: '@/pages/BackPages/BackHomePage',
    title: '数据浏览',
  },
  {
    path: 'sub5', // 订单管理
    role: '2',
    component: '@/pages/BackPages/Sale/OrderManage',
    title: '订单管理',
    routes: [
      {
        path: '/ordermanage',
        component: '@/pages/BackPages/Sale/OrderManage',
        title: '订单列表',
      },
      {
        path: '/assessment',
        component: '@/pages/BackPages/Sale/Assessment',
        title: '评价管理',
      },
    ],
  },
  {
    role: '2',
    title: '商品管理',
    path: 'sub1',
    routes: [
      {
        path: '/creategoods',
        component: '@/pages/BackPages/Sale/CreateGoods',
        title: '新增商品',
      },
      {
        path: '/goodsmanage',
        component: '@/pages/BackPages/Sale/GoodsManage',
        title: '商品管理',
      },
      {
        path: '/goodsRecord',
        component: '@/pages/BackPages/Sale/GoodsRecord',
        title: '入库记录',
      },
      {
        path: '/goodsout',
        component: '@/pages/BackPages/Sale/GoodsOut',
        title: '出库记录',
      },
    ],
  },
  // 后台管理（管理员）
  {
    role: '3',
    title: '数据浏览',
    path: 'sub1',
    routes: [
      {
        path: '/back',
        component: '@/pages/BackPages/BackHomePage',
        title: '总体预览',
      },
      {
        path: '/moneydetail',
        component: '@/pages/BackPages/Manage/MoneyDetail',
        title: '进账明细',
      },
    ],
  },
  {
    role: '3',
    title: '活动管理',
    path: 'sub2',
    routes: [
      // {
      //   path: '/preferential', // 优惠活动
      //   component: '@/pages/BackPages/Manage/Preferential',
      //   title: '优惠活动',
      // },
      {
        path: '/ads', // 广告投放
        component: '@/pages/BackPages/Manage/PostAds',
        title: '广告投放',
      },
      {
        path: '/notice', // 资讯管理
        component: '@/pages/BackPages/Manage/Notice',
        title: '资讯管理',
      },
      {
        path: '/addAdvice', // 新增资讯
        component: '@/pages/BackPages/Manage/AddAdvice',
        title: '新增资讯',
      },
    ],
  },
  {
    role: '3',
    title: '用户管理',
    path: 'sub3',
    routes: [
      {
        path: '/review-business',
        component: '@/pages/BackPages/Manage/ReviewBusiness',
        title: '审批注册商家',
      },
      {
        path: '/sales', // 商家管理
        component: '@/pages/BackPages/Manage/Sales',
        title: '商家管理',
      },
      {
        path: '/users', // 买家管理
        component: '@/pages/BackPages/Manage/Users',
        title: '买家管理',
      },
      {
        path: '/bannedPost', // 禁言管理
        component: '@/pages/BackPages/Manage/BannedPost',
        title: '禁言管理',
      },
    ],
  },
];

const HomePage: React.FC<Props> = ({ children, thisRoute, lastRoute }) => {
  // 主题颜色的值
  const [color, setColor] = useState<string>(localStorage.getItem('color') || '#1a7721');

  return (
    <div className={styles.container}>
      <BackSider color={color} menus={backRoute} thisRoute={thisRoute} />
      <BackHead lastRoute={lastRoute} setColorParent={setColor} />
      {children}
    </div>
  );
};
export default HomePage;
